<template>
  <div>
    <div :class="{ Fixed: isFixed }">
      <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" @click="fnChange" />
      </van-dropdown-menu>
    </div>

    <div class="r-center">
      <div class="RcenterOne">健康指数</div>
      <div class="RcenterTwo">{{ num }}</div>
      <div class="RcenterThree"></div>
      <div class="RcenterFour">
        您的健康指数为{{ num }}，比{{ nums }}的人更健康
      </div>
    </div>

    <div>
      <van-cell-group>
        <van-cell title="一般情况" class="r-footer" />
        <van-cell title="身高" :value="users[0].renheight" />
        <van-cell title="体重指数BMI" :value="users[0].renweight" />
        <van-cell title="收缩压" :value="users[0].shrink" />

        <van-cell title="舒张压" :value="users[0].diastole" />
        <van-cell title="四肢" :value="users[0].platelet" />
      </van-cell-group>
    </div>

    <div>
      <van-cell-group>
        <van-cell title="血常规（五类）" class="r-footer" />
        <van-cell title="白细胞" :value="users[0].renheight" />
        <van-cell title="红细胞" :value="users[0].renweight" />
        <van-cell title="血红蛋白" :value="users[0].shrink" />

        <van-cell title="红细胞压积" :value="users[0].diastole" />
        <van-cell title="血小板" :value="users[0].platelet" />
      </van-cell-group>
    </div>

    <div>
      <van-cell-group>
        <van-cell title="肝脏三项" class="r-footer" />
        <van-cell title="丙氨酸氨基转氨酶" :value="users[0].renheight" />
        <van-cell title="天门冬氨酸氨基转氨酶" :value="users[0].renweight" />
        <van-cell title="AST/ALT" :value="users[0].shrink" />

        <van-cell title="谷氨酰转肽酶" :value="users[0].diastole" />
        <van-cell
          title="备注：本报告数据由【慈铭】广州体育中心体检中心提供。  "
          class="teshuone"
        />
        <van-cell title="" :value="users[0].platelet" />
      </van-cell-group>
    </div>

    <div class="r-btom">
      <van-button
        type="primary"
        text="咨询医生"
        @click="show = true"
        class="RBtomOne"
      />
      <van-overlay :show="show" @click="show = false">
        <div class="wrapper">
          <div class="block" @click.stop>
            <div>您是否需要截屏体检报告数据咨询医生</div>
            <div>截屏并咨询</div>
            <div @click="tounscramble">直接咨询</div>
            <div @click="show = false">暂时不咨询医生</div>
          </div>
        </div>
      </van-overlay>

      <van-button type="primary" to="index" class="RBtomTwo"
        >快速挂号</van-button
      >
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import "vant/lib/index.css";
import { NavBar } from "vant";
import { Toast } from "vant";
import { Cell, CellGroup } from "vant";
import { Collapse, CollapseItem } from "vant";
import { Button } from "vant";
import { Overlay } from "vant";
import { ShareSheet } from "vant";
import { DropdownMenu, DropdownItem } from "vant";

Vue.use(DropdownMenu);
Vue.use(DropdownItem);

Vue.use(ShareSheet);

Vue.use(Overlay);

Vue.use(Button);

Vue.use(Collapse);
Vue.use(CollapseItem);

Vue.use(Cell);
Vue.use(CellGroup);

Vue.use(NavBar);
export default {
  data() {
    return {
      isFixed: false,
      num: "87",
      nums: "80%",
      value1: 0,
      show: false,
      option1: [
        { text: "全部", value: 0 },
        { text: "一般情况", value: 1 },
        { text: "血常规", value: 2 },
        { text: "肝脏功能", value: 3 },
      ],
      users: [
        {
          renheight: "160.5cm",
          renweight: "18.3",
          shrink: "96mmHg",
          diastole: "66mmHg",
          platelet: "103.00*10^9/L",
          noplatelet: "↓03.00*10^9/L",
        },
      ],
    };
  },
  methods: {
    tounscramble() {
      this.$router.push("/unscramble");
    },
  },
  mounted() {
    // 1、监听屏幕滚动
    window.addEventListener("scroll", (e) => {
      // 2、获取滚动条距离顶部高度
      let scrollTop = document.documentElement.scrollTop;
      // console.log(scrollTop)
      // 6、根据滚动条高度来决定是否吸顶
      // console.log( this.isFixed)
      if (scrollTop >= 20) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    });
  },
};
</script>

<style scoped>
.r-center {
  width: 100%;
  height: 152px;
  background: #f2f2f2;
  text-align: center;
}
.RcenterOne {
  font-size: 14px;
  padding-top: 20px;
}
.RcenterTwo {
  font-size: 26px;
  font-weight: bold;
  padding-top: 15px;
}
.RcenterThree {
  width: 180px;
  height: 32px;
}
.RcenterFour {
  padding-top: 10px;
  color: #333333;
  font-size: 14px;
}

.r-footer {
  background: #e4e4e4;
}

.r-btom {
  position: fixed;
  left: 0;
  bottom: 0;
}
.RBtomOne {
  width: 176px;
  height: 40px;
  background: #fff;
  color: #00cccc;
  border: 1px solid #00cccc;
}
.RBtomTwo {
  width: 184px;
  height: 40px;
  background: #00cccc;
  color: #fff;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 307px;
  height: 203px;
  background-color: #fff;
  color: #00cccc;
}
.block div {
  font-size: 14px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border-bottom: 1px solid #00cccc;
}
.block div:nth-child(1) {
  border-top: 1px solid #00cccc;
  color: #333333;
  font-weight: bold;
}

.teshuone {
  font-size: 12px;
  color: #ccc;
}

.Fixed {
  position: fixed;
  top: 0;
  width: 100%;
}
</style>